<!doctype html>
<html lang="zh-cn">
<head>
	<?php include('./tpl/head.php'); ?>

	<title>网上书城</title>
<style>
	h2 { border-bottom:2px solid #888; padding-bottom:10px;}
	#tableTitle p{margin-bottom:0;}
	.bookPic { max-width:138px; max-height:180px;}
	h3 { margin-top:0; }
	.quantity { width:50px; }
	.tableRow { border-bottom:1px solid #ccc; padding-top:10px; padding-bottom:10px;}
	#proceedToCheckout { margin-top:14px; width:100%; }
</style>
</head>

<body>
	<?php include('./tpl/nav.php'); ?>

	<div class="container">
		<div class="row">
			<h2 class="col-sm-12">购物车</h2>
		</div>
		<div class="row hidden-xs" id="tableTitle">
			<p class="col-sm-offset-8 col-sm-2">单价</p>
			<p class="col-sm-2">数量</p>
		</div>
		
		<?php for ($i=0; $i<3; $i++): ?>
		<div class="row tableRow">
			<div class="col-sm-2">
				<img class="bookPic" src="./image/人月神话.jpg">
			</div>
			<div class="col-sm-6">
				<h3><a href="./book.php?id=">人月神话</a></h3>
			</div>
			<div class="col-sm-2">
				<p class="h4"><span class="visible-xs">单价：</span><span class=" text-danger">￥<span class="price">36.20</span></span></p>
			</div>
			<div class="col-sm-2">
				<span class="visible-xs">数量：</span>
				<div class="form-group">
					<label for="inputPassword2" class="sr-only">购买数量</label>
					<input id="quantity" type="text" class="form-control text-center quantity" value="1">
				</div>
			</div>
		</div>
		<?php endfor; ?>

		<div class="row" id="rowCount">
			<div class="col-sm-11">
				<p class="h3 text-right">小计 (<span id="quantityCount">2</span> 件商品)：<span class="text-danger">￥<span id="priceCount">108.60</span></span></p>
			</div>
			<div class="col-sm-1">
				<button class="btn btn-primary" id="proceedToCheckout">结算</button>
			</div>
		</div>


	</div>

	<?php include('./tpl/foot.php'); ?>
	<script>

		var freshPriceCount = function () {
			var arrPrice = $(".price");
			var arrQuantity = $(".quantity");
			var priceCount = 0;
			$.each(arrPrice, function(i){
				priceCount += parseFloat(arrPrice[i].innerHTML) * parseInt(arrQuantity[i].value);
			});
			$("#priceCount").html(priceCount.toFixed(2));
		}

		$(function(){
			freshPriceCount();
			
			$(".quantity").on("focusout", function(){
				freshPriceCount();
			})

		});
	</script>
</body>
</html>
